body{
    display: flex;
    flex-direction: column;
    color: #000;
}
header{
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: rgba(16, 16, 16, 100);
    background-color: #f8f8f8;
    font-size: 16px;
}
main{
    position: relative;
    flex: 1;
    background: url(../img/advertisement-bg.jpg) no-repeat;
     //背景图水平居中 顶部对齐
    background-position:top center;
    background-size:auto 100%;
    p{
        width: 100%;
        position: absolute; 
        left: 0;
        bottom: 124px;
        text-align: center;
        font-weight: bold;
        font-size: 40px;
        color: #fff;
        animation: fadeup 1.5s linear;
    }
    div{
        position: absolute;
        right: 20px;
        top:20px;
        width: 120px;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        background-color: #fff;
        ::after{
            content: '';
            position: absolute;
            top: 8px;
            left: 45px;
            width: 1px;
            height: 25px;
            background-color: #bbb;
         }
         span,em{
             padding: 0 15px;
             font-style: normal;
         } 
    }
}
//动画效果 从上到下淡入,字体由小到大
@keyframes fadeup{
    from{
        opacity: 0;
        bottom: 200px;
        font-size: 0px;
    }
    to{
        opacity: 1;
        bottom: 124px;
        font-size: 40px;
    }
}


